<template>
    <div>
    <main>
        <header><h1>分类</h1></header> 
        <ul>
            <li>
                <span class="iconfont icon-icon17"></span>
                <p>男装</p>
            </li>
            <li>
                <span class="iconfont icon-nvzhuang"></span>

                <p>女装</p>
            </li>
            <li>
                <span class="iconfont icon-riyong"></span>
                <p>日用</p>
            </li>
            <li>
                <span class="iconfont icon-shuma"></span>
                <p>数码</p>
            </li>
            <li>
                <span class="iconfont icon-yundong"></span>
                <p>运动</p>
            </li>
            <li>
                <span class="iconfont icon-bao"></span>

                <p>包箱</p>
            </li>
            <li>
                <span class="iconfont icon-muying"></span>

                <p>母婴</p>
            </li>
            <li>
                <span class="iconfont icon-xiangshui"></span>

                <p>香水</p>
            </li>
        </ul>
    </main>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

main{
    // padding:0 .2rem;
    header{
        h1{
            font:550 25px/3 "";
            padding: 0 .2rem;
        }
    }
    ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding:0 .2rem;

    li{
        width: 33%;
        height: .5rem;
        background: rgba(0,0,0,.03);
        margin: .1rem 0;
        border-radius:5px ;
        font-size: 14px;
        font-weight: 500;;
        // text-align: center;
        padding:.2rem;
        p{
            // margin-left: 2rem;
            // font: 15px/3 "";
            // font: 14px/1rem '';
            margin-top: .05rem;
        }
        .iconfont {
            font-size: 18px;
            font-weight:600 ;
        }
    }
} 
}


</style>